<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>设备定时</title>
		<script type="text/javascript" src="./js/jquery.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<!--<script type="text/javascript" src="./js/mui.js"></script>-->
		<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
		
		<link href="./js/mobiscroll/mobiscroll.frame.css" rel="stylesheet" type="text/css">
		<link href="./js/mobiscroll/mobiscroll.scroller.css" rel="stylesheet" type="text/css">
		<script src="./js/mobiscroll/mobiscroll.core.js"></script>
		<script src="./js/mobiscroll/mobiscroll.frame.js"></script>
		<script src="./js/mobiscroll/mobiscroll.scroller.js"></script>
		<script src="./js/mobiscroll/mobiscroll.util.datetime.js"></script>
		<script src="./js/mobiscroll/mobiscroll.datetimebase.js"></script>
		<script src="./js/mobiscroll/mobiscroll.datetime.js"></script>
		<script src="./js/mobiscroll/mobiscroll.i18n.zh.js"></script>
		
		<style>
			.onOffDiv{
				display: inline-block;
				margin-top: .6rem;
				margin-right: .5rem;
				color: #006600;
				
				display: flex;
				justify-content: center;
				align-items: center;
				
				margin: 0;
			}
			.content>.block>div:nth-child(1) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding-top: .5rem;
			}
			.content>.block>div:nth-child(1)>.button{
				width: 5rem;
			}
		</style>
		
	</head>

	<body>
		<header id="header" >
			<div class="iback" onclick="history.go(-1);"></div>
			<div></div>
		</header>
		
		<div class="content">
			<!--
			<div class="block" id="openDiv">
				<div>
					2019-03-30 09:50<br/>
					仅此一次 开启
					<div class="button" >删除</div>
				</div>
			</div>
			
			<div class="block" id="openDiv" onclick="openSheBei()">
				<div>
					09:50<br/>
					每天 开启
				</div>
			</div>
			-->
			
			
		</div>
		<div class="footer" >
			<div class="block" onclick="" id="addTimeCommon">
				<div>普通定时</div>
			</div>
			<div class="block" onclick="" id="addTimeRepeat">
				<div>重复定时</div>
			</div>
		</div>
		<script type="application/javascript">
			var deviceId=getUrlParam("id");
			var myJob={};
			
			function init(){
				
				var onOffHtml='<div class="onOffDiv">	'+
											'<input type="radio" name="onOff" checked="checked" value="1"/><label>开启</label>'+
											'<input type="radio" name="onOff" value="0"/><label>关闭</label>'+
										'</div>';
				
				$('#addTimeCommon').mobiscroll().datetime({
			        	lang: 'zh',       // https://docs.mobiscroll.com/2-14-0/jquery/datetime#localization-lang
			        	onShow: function (html, valueText, inst) {
			        		$(".dwbc").append(onOffHtml);
    					},
    					onClose:function(valueText, btn, inst){
    						console.log($("input[name='onOff']:checked").val());
    						myJob.control=$("input[name='onOff']:checked").val();//控制，0关闭设备，1打开设备
    					},
    					onSelect: function (valueText, inst) {
    						myJob.time=timeToNumber(valueText);//任务执行时间
    						myJob.type=1;//任务类型，1执行一次，2执行无数次s
    						console.log(time_yyyyMMdd_hhmm(valueText));
    						addJob()
    					}
			    });
			    $('#addTimeRepeat').mobiscroll().time({
			        	lang: 'zh',       // https://docs.mobiscroll.com/2-14-0/jquery/datetime#localization-lang
			        	onShow: function (html, valueText, inst) {
			        		$(".dwbc").append(onOffHtml);
    					},
    					onClose:function(valueText, btn, inst){
    						console.log($("input[name='onOff']:checked").val());
    						myJob.control=$("input[name='onOff']:checked").val();//控制，0关闭设备，1打开设备
    					},
    					onSelect: function (valueText, inst) {
    						valueText=getYear()+"-"+getMonth()+"-"+getDate()+" "+valueText;
    						myJob.time=timeToNumber(valueText);//任务执行时间
    						myJob.type=2;//任务类型，1执行一次，2执行无数次s
    						console.log(time_yyyyMMdd_hhmm(valueText));
    						addJob()
    					}
			    });
			    
			    
			    var sql="select * from device where id='"+deviceId+"'";
				listSql(sql,function(data){
					if(data.length>0){
						$($("#header>div")[1]).html(data[0].name);
					}
				});
				
				list();
				
			}
			
			
			
			function addJob(){
		    	myJob.id=uuid();
		    	myJob.deviceId=deviceId;
		    	var data={};
		    	data.bean=JSON.stringify(myJob);
		    	console.log(JSON.stringify(myJob));
				$.ajax({
					url:'common/addJob',
					type:"post",
					async:true,
					data:data,
					success: function (data) {
						console.log("result:"+data);
						if(data==1){
							alert("成功！");
							list();
						}
						if(data==0){
							alert("失败！");
							list();
						}
					},
					error: function (error) {
						alert(JSON.stringify(error));
					}
				})
		    }
			
			function list(){
				var sql="SELECT * FROM myjob where deviceId='"+deviceId+"'";
                var html="";
				listSql(sql,function(data){
					console.log(data);
										
                    for(var i=0;i<data.length;i++){
                        var obj=data[i];
                        var status='<div class="grayColor" id="status'+obj.id+'">未连接</div>'
                        var type="";
                        var time="";
                        var control="";
                        
                        if(obj.control==0){
                        	control="关闭";
                        }
                        if(obj.control==1){
                        	control="开启";
                        }
                        
                        if(obj.type==1){
                        	type="仅此一次 "+control;
                        	time=time_yyyyMMdd_hhmm(obj.time);
                        }
                        if(obj.type==2){
                        	type="每天 "+control;
                        	var t=new Date();
                        	t.setTime(obj.time);
                        	time=t.getHours()+":"+t.getMinutes();
                        }
                        html+='<div class="block" id="openDiv">'+
									'	<div>'+
									'		'+time+'<br/>'+
									'		'+type+''+
									'		<button class="button" onclick="delJob(\''+obj.id+'\')">删除</button>'+
									'	</div>'+
									'</div>';
                            
                    }
                    $(".content").html(html);
                    
				});	
			}
			
			function delJob(id){
				
				if(confirm("是否删除")){
					$("button[onclick*='delJob']").attr("disabled","disabled");
					var data={};
					data.id=id;
					$.ajax({
						url:'common/delJob',
						type:"post",
						async:true,
						data:data,
						success: function (data) {
							console.log("result:"+data);
							if(data==1){
								alert("成功！");
								list();
							}
							if(data==0){
								alert("失败！");
								list();
							}
							$("div[onclick*='delJob']").removeAttr("disabled");
						},
						error: function (error) {
							alert(JSON.stringify(error));
						}
					})
				}

			}
			
		
			
			init();
		</script>
	</body>
</html>